import { defineComponent, ref, reactive, onMounted } from 'vue'
import { ElCard, ElFormItem, ElInput, ElButton, ElDatePicker } from 'element-plus'
// import { Plus } from '@element-plus/icons-vue'

import type { FormValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'

import ProSaasTable from '~/components/ProSaasTable'
import AliIcon from '~/components/AliIocn'
import ExportExcel from '~/components/ExportExcel'
import dayjs from 'dayjs'

// 单灯工况
export default defineComponent(function LampWorkData() {
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<FormValuesType>({})

  const state = reactive({
    exportVisible: false
  })
  const columns: TableColumnProps<FormValuesType>[] = [
    {
      label: '单灯名称',
      prop: 'lampNodeName',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true
    },
    {
      label: '单灯编号',
      prop: 'lampNodeCode',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '所属灯杆',
      prop: 'lampPostName',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '所属分组',
      prop: 'groupName',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },

    {
      label: '回路',
      prop: 'num',
      minWidth: 140,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '开关状态',
      prop: 'switchStatus',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      render: ({ row }) => <div>{filterStatus(row.switchStatus!)}</div>
    },
    {
      label: '电压',
      prop: 'dcVoltage',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '电流',
      prop: 'dcCurrent',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '调光等级',
      prop: 'dimmingLevel',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '有功功率',
      prop: 'activePower',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    // {
    //   label: '无功功率',
    //   prop: 'reactivePower',
    //   minWidth: 160,
    //   align: 'center',
    //   unFixed: true,
    //   showOverflowTooltip: true,
    //   sortable: true
    // },
    {
      label: '漏电流',
      prop: 'leakageCurrent',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },

    {
      label: '功率因数',
      prop: 'powerFactor',
      minWidth: 160,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true
    },
    // {
    //   label: '无功电量',
    //   prop: 'reactiveEnergy',
    //   minWidth: 160,
    //   align: 'center',
    //   unFixed: true,
    //   showOverflowTooltip: true,
    //   sortable: true
    // },

    // {
    //   label: '有功电量',
    //   prop: 'activeEnergy',
    //   minWidth: 160,
    //   align: 'center',
    //   unFixed: true,
    //   showOverflowTooltip: true,
    //   sortable: true
    // },

    {
      label: '上报时间',
      prop: 'createTime',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true
    }
  ]

  const filterStatus = (status: string) => {
    switch (status) {
      case '0':
        return '关灯'
      case '1':
        return '开灯'
      default:
        return status
    }
  }
  onMounted(() => {})

  // 按回车搜索列表
  const handleKeyDownEnterSubmitForm = (evt: Event | KeyboardEvent) => {
    if ((evt as KeyboardEvent).key === 'Enter') proSaasTableRef.value!?.toSearch()
  }
  // 清空搜索
  const clearSearchTable = async () => {
    setTimeout(() => {
      proSaasTableRef.value!?.toSearch()
    }, 100)
  }

  // 导出
  const handleChangeExportModal = () => {
    state.exportVisible = !state.exportVisible
  }
  // 日期变时 搜索
  const props = {
    onChange: () => {
      setTimeout(() => {
        proSaasTableRef.value!?.toSearch()
      }, 100)
    }
  }
  return () => (
    <ElCard>
      <ProSaasTable<FormValuesType>
        tableId="monitor_woekdata"
        ref={proSaasTableRef}
        columns={columns}
        hasSelection
        dispatchType="singleLamp/GetWorkData"
        searchFormProps={{
          model: formValues
        }}
        searchParams={{
          times: undefined,
          beginTime: formValues.times?.[0] ? dayjs(formValues.times?.[0]).valueOf() : '',
          endTime: formValues.times?.[1] ? dayjs(formValues.times?.[1]).valueOf() : ''
        }}
        headerTitle={
          <>
            {
              <ElButton type="primary" onClick={() => handleChangeExportModal()}>
                <AliIcon type="icon-daochu" />
                &nbsp; 导出
              </ElButton>
            }
          </>
        }
        searchformResponsiveCol={[
          <ElFormItem key="keyWord" prop="keyWord" label="">
            <ElInput
              v-model={formValues.keyWord}
              placeholder="设备名称"
              clearable
              onKeydown={handleKeyDownEnterSubmitForm}
              onClear={clearSearchTable}
            />
          </ElFormItem>,
          <ElFormItem key="times" prop="times">
            <ElDatePicker
              v-model={formValues.times}
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              {...props}
            />
          </ElFormItem>
        ]}
      />
      {state.exportVisible && (
        <ExportExcel
          visible={state.exportVisible}
          dispatchType="singleLamp/ExportWorkData"
          columns={proSaasTableRef.value?.filterColumns}
          payload={{ params: formValues }}
          exportNumber={proSaasTableRef.value?.pagination.total}
          onCancel={handleChangeExportModal}
        />
      )}
    </ElCard>
  )
})
